<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据展示页面</title>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    body {
      background-color: black;
      background-image: url('./2.png');
      background-repeat: no-repeat;
      background-position: 0% 0%;
      background-size: cover;
    }

    h1 {
      text-align: center;
      margin-top: 50px;
      height: 100px;
      color: azure;
    }

    .tem {
      margin-left: 80px;
      font-size: 18px;
      color: whitesmoke;
    }

    .hum {
      font-size: 18px;
      margin-left: 100px;
      color: whitesmoke;
    }

    .light {
      margin-left: 100px;
      font-size: 18px;
      color: whitesmoke;
    }

    .module1 {
      margin-left: 80px;
      font-size: 18px;
      color: whitesmoke;
    }

    .module2 {
      margin-left: 80px;
      margin-top: 100px;
      font-size: 18px;
      color: whitesmoke;
    }

    form {
      margin-left: 80px;
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <h1>MQTT控制台</h1>
  <p class="module1">
    客户端1<span id=module1 style="margin-left: 10px;">离线</span>
  </p>
  <p>
  <div style="margin-top: 40px;">
    <span class="tem">温度：<span id="temp" style="color: lawngreen;font-size: 25px;">**</span>&nbsp;&nbsp;&nbsp;&deg;C
    </span>
    <span class="hum">湿度：<span id="hum" style="color: lawngreen;font-size: 25px;">**</span>&nbsp;&nbsp;&nbsp;%</span>
    <span class="light">光照强度：<span id="light" style="color: lawngreen;font-size: 25px;">**</span>
  </div>
  </p>

  <div style="margin-top: 100px;">
    <span class="module2">客户端2<span id="module2" style="margin-left: 10px;">离线</span></span>
    <form id="messageForm">
      <input class="form-control" style="width: 160px;" placeholder="请输入指令" type="text" name="rgb" id="message" />
      <input class="btn btn-info" style="margin-top: 10px;margin-left: 100px;" type="submit" value="提交">
      <span style="margin-left: 120px;color: white;font-size: 18px;">RGB灯状态：</span>&nbsp;&nbsp;&nbsp;<span id="RGB"
        style="font-size: 25px;color: lawngreen;">***</span>
    </form>
  </div>


  <script src="http://localhost:3000/socket.io/socket.io.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      var socket = io.connect("http://localhost:3000/");
      const $messageForm = $('#messageForm');
      const $message = $('#message');

      //提交RGB灯控制指令
      $messageForm.submit(function (e) {
        e.preventDefault();
        socket.emit('rgb', $message.val());
        $message.val('');
      })

      //获取光照强度
      socket.on('light', function (data) {
        $("#light").html(data.msg);
      });

      //获取RGB灯状态
      socket.on('RGB', function (data) {
        $("#RGB").html(data.msg);
      });

      //获取2号节点板状态
      socket.on('module2', function (data) {
        var str = data.msg
        if (str == 'CLIENT-ONLINE') {
          str = '在线'
          $("#module2").html(str);
          document.getElementById("module2").style.color = "lawngreen"
        } else {
          str = '离线'
          $("#module2").html(str);
          $("#RGB").html("***");
          document.getElementById("module2").style.color = "white"
        }
      });

      //获取温湿度数据
      socket.on('dht11', function (data) {
        var json = JSON.parse(data.msg);
        $("#temp").html(json.temperature);
        $("#hum").html(json.humidity);
      });

      //获取1号节点板状态
      socket.on('module1', function (data) {
        var str = data.msg
        if (str == 'CLIENT-ONLINE') {
          str = '在线'
          $("#module1").html(str);
          document.getElementById("module1").style.color = "lawngreen"
        } else {
          str = '离线'
          $("#temp").html("**");
          $("#hum").html("**");
          $("#light").html("***");
          $("#module1").html(str);
          document.getElementById("module1").style.color = "white"
        }
      });
    });

  </script>
</body>
</html>